import React, { Component } from "react";
import { Row, Col, Typography } from "antd"
import { Header, Footer, SideMenu, Carousel, ProductCollection, Cooperative } from "../../components"
import { productList1, productList2, productList3 } from "./mockups"
import styles from "./HomePage.module.css"
import SideImage from "../../assets/images/sider_2019_12-09.png"
import SideImage2 from "../../assets/images/sider_2019_02-04.png"
import SideImage3 from "../../assets/images/sider_2019_02-04-2.png"
import { withTranslation, WithTranslation } from "react-i18next"
class HomePageComponent extends Component<WithTranslation> {
    render() {
        const { t } = this.props
        return (
            <>
                {/* header */}
                <Header></Header>
                {/* sideMenu and carousel */}
                <div className={styles['page-content']}>
                    <Row style={{ marginTop: 20 }}>
                        <Col span={6}>
                            <SideMenu />
                        </Col>
                        <Col span={18}>
                            <Carousel />
                        </Col>
                    </Row>
                    <ProductCollection
                        title={
                            <Typography.Title level={3} type="warning">
                                {t("home_page.hot_recommended")}
                            </Typography.Title>
                        }
                        sideImage={SideImage}
                        products={productList1}
                    />
                    <ProductCollection
                        title={
                            <Typography.Title level={3} type="danger">
                                {t("home_page.new_arrival")}
                            </Typography.Title>
                        }
                        sideImage={SideImage2}
                        products={productList2}
                    />
                    <ProductCollection
                        title={
                            <Typography.Title level={3} type="success">
                                {t("home_page.domestic_travel")}
                            </Typography.Title>
                        }
                        sideImage={SideImage3}
                        products={productList3}
                    />
                    {/* Cooperative */}
                    <Cooperative />
                </div>
                {/* footer */}
                <Footer></Footer>
            </>
        )
    }
}
export const HomePage = withTranslation()(HomePageComponent)